import React, { useState, useEffect, useMemo } from 'react';
import { Form, Input, Button, Select, DatePicker, Tooltip } from 'antd';
import { SearchOutlined } from '@ant-design/icons';
import moment from 'moment';
import AntdWrapper from '@/components/AntdWrapper';
import { customTrimFunc } from '@/utils/utils.jsx';
import IconFont from '@/components/IconFont';

const { Option } = Select;
const { RangePicker } = DatePicker;
const dateFormat = 'YYYY-MM-DD HH:mm:ss';

const SearchContent = ({ query, handleSearch, handleClickExpand }) => {
  const [form] = Form.useForm();

  useEffect(() => {
    form.resetFields();
  }, [query]);

  //点击重置
  const onReset = () => {
    form.resetFields();
    handleSearch();
  };

  return (
    <Form
      form={form}
      className="new-search-form-style"
      onFinish={() => handleSearch(customTrimFunc(form.getFieldValue()))}
      name="retire-warehouse-search-form"
      initialValues={{ ...query }}
    >
      <AntdWrapper label="销退入库单号">
        <Form.Item label="" name="returnOrderSn">
          <Input
            placeholder="请输入销退入库单号"
            autoComplete="off"
            allowClear
          />
        </Form.Item>
      </AntdWrapper>

      <AntdWrapper label="退货物流单号">
        <Form.Item label="" name="logisticsNo" colon={false}>
          <Input
            placeholder="请输入退货物流单号"
            autoComplete="off"
            allowClear
          />
        </Form.Item>
      </AntdWrapper>

      <AntdWrapper label="系统订单号">
        <Form.Item label="" name="orderSn" colon={false}>
          <Input
            placeholder="请输入系统订单号"
            autoComplete="off"
            allowClear
          />
        </Form.Item>
      </AntdWrapper>

      <AntdWrapper label="商品编码">
        <Form.Item label="" name="goodsCode" colon={false}>
          <Input placeholder="请输入商品编码" autoComplete="off" allowClear />
        </Form.Item>
      </AntdWrapper>

      <AntdWrapper
        label={
          <span style={{ color: '#000', fontSize: '12px' }}>创建时间</span>
        }
        style={{ width: '620px' }}
      >
        <Form.Item label="" name="time">
          <RangePicker format={dateFormat} showTime />
        </Form.Item>
      </AntdWrapper>

      <Form.Item label=" " colon={false} style={{ width: 260 }}>
        <Button
          type="primary"
          htmlType="submit"
          style={{ marginRight: '8px', height: '32px', fontSize: '12px' }}
          shape="round"
          icon={<SearchOutlined />}
        >
          查询
        </Button>
        <Button
          onClick={onReset}
          shape="round"
          icon={<IconFont type="iconformReset" />}
          className="newRoundBtn"
        >
          重置
        </Button>
      </Form.Item>
    </Form>
  );
};

export default SearchContent;
